<template>
  <div class="contactCustomer">
    <!--    导航开始-->
    <commonHeader
      :title="title"
      @goBack="goBack()">
    </commonHeader>
    <div class="content">
<!--      方案一-->
      <div class="programme">
        <h2>方案一</h2>
        <div class="programmeItems flex-space-between">
          <copyContent :copyTitle="copyTitle"
                       :copyText="copyText"
                       :copyDes="copyDes"
                       @onCopy="onCopy"
                       @onError="onError">
          </copyContent>
        </div>
      </div>
<!--      方案二-->
      <div class="programme">
        <h2>方案二</h2>
        <div class="programmeItems flex-space-between">
          <div>拨打电话</div>
          <a :href="'tel:' + tel" class="items flex-end">
            <div class="items">{{tel}}</div>
            <img src="http://job.dayinyun.com/rightIcon.png" alt="">
          </a>
        </div>
      </div>
<!--      方案三-->
      <div class="programme">
        <h2>方案三</h2>
        <div class="programmeItems">
          <div>发消息至客服</div>
          <textarea v-model="message" name="" id="" placeholder="请输入"></textarea>
          <div class="button flex-end">
            <button @click="sendMsg()">发送</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import commonHeader from "../../components/common/commonHeader";
  import copyContent from "../../components/copyContent";
  import {GETCUSTOMERMSG, SENDMSG} from "../../apis/mine";
  export default {
    name:"contactCustomer",
    components:{
      commonHeader,
      copyContent
    },
    data() {
      return {
        title: "联系客服",
        copyTitle:"请联系微信客服",
        copyText:"15010296120",
        copyDes:"复制",
        tel:"15010296120",
        message:"",//给客服发送的消息内容
        sendId:"1593322325300",//客服id
      }
    },
    mounted() {
      // 获取客服id
      this.getCustomerMsg()
    },
    methods:{
      // 返回
      goBack(){
        if (window.history.length>1){
          window.history.go(-1)
        }else {
          if (this.$systemInfo() === "android") {
            window.android.closeCurrentPage();
          } else if (this.$systemInfo() === "ios") {
            window.webkit.messageHandlers.closeCurrentPage.postMessage(null);
          }
        }
        // this.$router.back()
      },
      // 复制成功
      onCopy() {
        this.$toast("复制成功");
      },
      // 复制失败
      onError() {
        this.$toast("复制失败");
      },
      // ------------------接口开始-------------
      // 获取客服信息
      getCustomerMsg(){
        let getCustomerMsg = GETCUSTOMERMSG
        let params = {
          identity:2,//1：系统 2：客服
        }
        getCustomerMsg(params).then(res=>{
          if(res.data.code*1===200){
            this.sendId = res.data.data.user_id;//客服id
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error=>{
          console.log(error)
        })
      },
      // 发送消息
      sendMsg(){
        let sendMsg = SENDMSG
        let params = {
          sender_id:this.sendId,//接收方ID
          content:this.message,//内容
          type:2,//发送类型 1：系统 2：客服 3：私信 4：商家
        }
        sendMsg(params).then(res=>{
          if(res.data.code*1===200){
            this.$toast("发送成功！");
            this.message = "";//清空消息
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error=>{
          console.log(error)
        })
      },
      // ---------------------接口结束---------------------------------
    }
  }
</script>

<style lang="less" scoped>
  @import (reference) url(../../assets/less/common);
  .contactCustomer{
    width:100%;
    padding-top:1.38rem;
    box-sizing: border-box;
    .content{
      width: 100%;
      padding:0.22rem 0.3rem;
      box-sizing: border-box;
      .programme{
        width:100%;
        margin-bottom:0.5rem;
        h2{
          font-size:@fontSize34;
          font-family:@fontFamily400;
          font-weight:@fontWeight500;
          line-height:0.36rem;
          color:#FFFFFF;
          margin-bottom:0.2rem;
        }
        .programmeItems{
          width:100%;
          padding:0.3rem;
          box-sizing: border-box;
          background: #232323;
          font-size:@fontSize34;
          font-family:@fontFamily400;
          font-weight:@fontWeight500;
          line-height:0.36rem;
          color:#FFFFFF;
          .items{
            color:#FFFFFF;
            img{
              width:0.28rem;
              height: auto;
            }
          }
          textarea{
            width:100%;
            height:1.4rem;
            background:none;
            padding:0.2rem 0;
            box-sizing: border-box;
            margin:0.2rem 0;
            font-size:@fontSize30;
            font-family:@fontFamily400;
            font-weight:@fontWeight500;
            line-height:0.4rem;
            color:#FFFFFF;
          }
          textarea::-webkit-input-placeholder { font-size:@fontSize30;color:#666666;}
          textarea::-moz-placeholder {  font-size:@fontSize30;color:#666666;} /* firefox 19+ */
          textarea:-ms-input-placeholder {  font-size:@fontSize30;color:#666666; } /* Internet Explorer 10+ */
          textarea:-moz-placeholder {  font-size:@fontSize30;color:#666666;} /* firefox 14-18 */
          .button{
            width:100%;
            button{
              width: 1.64rem;
              height:0.6rem;
              border-radius: 0.05rem;
              background:#FD0000;
              font-size: @fontSize28;
              font-family: @fontFamily500;
              font-weight: @fontWeight400;
              color:#ffffff;
            }
          }
        }
      }
    }
  }
</style>
